<template>
	<view class="container" >					
		<view class="dis-two-flex">
			<view class="turn-s">
				<view class="flex1">累计订单</view>
				<view>{{total_order}}</view>			
			</view>
			<view class="turn-s">
				<view class="flex1">积分收入</view>
				<view>{{total_score}}</view>			
			</view>
		</view>
		<view class="main">
		<scroll-view   scroll-y @scrolltolower="getList" :style="{height:screenHeight}">
		<view  class="main-content" v-for="(item,index) in list" :key="index">
			<view class="header-content" >
				<view class="left-header" >
					<text class="title">{{item.name}}</text>
					
				</view>
				<view @click="navTo('/pages/shop/shoporder?shop_id='+item.id)"  class="right-btn"><text style="font-size: 26rpx;">店铺订单</text><text v-if="item.orders_count>0" class="num">{{item.orders_count}}</text><text class="cell-icon yticon icon-you" style="margin: 4rpx 0rpx 0rpx 6rpx;font-size: 28rpx;"></text></view>
			</view>
	
			<view class="img-list">
				<view class="img-container" @click="navTo('/pages/shop/goods?shop_id='+item.id)">
					<view v-for="(_item, index) in item.goods" :key="index" class="img-item">
					        <image :src="_item.pics[0]" class="img" ></image>
					       
					</view>
					<view class="totals" v-show="item.goods_count>=3">共{{item.goods_count}}件</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';  
	import Api from '@/common/api';
	export default {
		
		data() {
			return {
				total_order:0,
				total_score:0,
				page:1,
				size:10,
				more_data:true,
				list:[],
				loadingType: 'more',
			};
		},
		
		onLoad() {
			this.getList();
			this.loadStatics()
		},
		
		computed: {
			...mapState(['hasLogin','userInfo','user_role']),
			checkLoginState(){
				// console.log(123,this.hasLogin)
				if(!this.hasLogin){
					uni.redirectTo({
						url:'/pages/public/wxLogin'
					})
				}
			},
			screenHeight: function() {
			    return (uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.getSystemInfoSync().statusBarHeight-80)+'px';
			}
			
		},
		onShow(){
			
		},
		onReady(){
			
		},
		
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			async getList(){
				if (!this.more_data) {
					return; //没有数据不请求
				}
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				
				this.loadingType = 'loading';
				let params = {
					page: this.page,
					size: this.size,
				};
				let data= await Api.apiCall('get', Api.apiName.all_shop_goods, params,true);
				if (!data ||data.code!=0) {
					this.more_data = false;
					this.loadingType = 'noMore'
					return;
				}
				this.list = this.list.concat(data.data)
				if (data.data.length > 0 && data.data.length == this.size) {
					this.page++;
					this.loadingType = 'more';
				} else {
					this.more_data = false;
					this.loadingType = 'nomore';
				}
				
			},
			// 获取订单统计
			async loadStatics() {
				let params = {};
				let data = await Api.apiCall('get', Api.apiName.shop_static, params);
				if (!data) { //出错时
					return;
				}
				let res = data.data;
				this.total_order=res.total_order;
				this.total_score=res.total_score;
			},
		},
	

	}
</script>

<style lang="scss">	

	page {
		background: #F5F5F5;
		
	}
	.dis-flex{
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		margin: 40rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 24rpx;
		align-items: center;
	}
	.dis-two-flex{
		display: flex;
		flex-direction: row;
		margin: 30rpx 30rpx 10rpx 30rpx;
		justify-content: center;
	}
	.turn-s{
		background: #FFFFFF;
		display: flex;
		padding: 30rpx;
		width: 50%;
		border-radius: 20rpx;
		margin: 0rpx 8rpx;
		font-size: 26rpx;
	}
	.flex1{
		flex: 1;
	}
	.main{
		background: $back-hui;
		height: 100%;
	}
	.main-content{
		background: $back-white;
		/* height: 400rpx; */
		margin: 30rpx;
		border-radius:20rpx;
	}
	.header-content{
		display: flex;
		align-items: center;
	}
	.left-header{
		flex: 1;
		display: flex;
		align-items: center;
		margin: 20rpx 20rpx 20rpx 0rpx;
		font-weight: bold;
	}
	.right-btn{
		margin: 20rpx;
		border-radius: 30rpx;
		padding: 8rpx 24rpx;
		font-size: $font-sm;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.title{
		margin-left: 20rpx;
		font-size: 36rpx;
	}	
	.img-list::-webkit-scrollbar {
		display: none;
	}
	.img-list {
	  width: 100%;
	  /* 设置图片容器的高度 */
	  /* height: 240rpx; */
	 /* overflow-x: auto; 
	  white-space: nowrap; */
	  overflow-x: hidden;
	  margin-top: 10rpx;
	  padding-bottom: 20rpx;
	}
	
	.img-container {
	  display: flex;
	  flex-direction: row;
	  position: relative;
	}
	.totals{
		background: rgba(255, 255, 255, 0.9);
		position: absolute;
		right: 16rpx;
		top: -2rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		width: 120rpx;
		justify-content: center;
		color: #999999;
	}
	
	.img-item {
	  margin:0rpx 16rpx; /* 图片之间的间距 */
	}
	
	.img {
	  width: 198rpx;
	  height: 198rpx;
	  border-radius: 20rpx;
	}
	.num{
		border-radius: 50%;
		background: #FF0000;
		color: #FFFFFF;
		width:30rpx;
		height: 30rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 16rpx;
		margin-left: 10rpx;
	}
</style>
